<template>
  <div class="register">
    <header>
        <h1>设置密码</h1>
    </header>
    <van-form @submit="onSubmit">
      <van-field v-model="tel" label="手机号" placeholder="请输入手机号" type="tel">
        <template #button>
          <van-button size="small" color="#da5c2a">获取验证码</van-button>
        </template>
      </van-field>
      <van-field
        v-model="sms"
        center
        clearable
        label="验证码"
        placeholder="请输入短信验证码"
      />
      <van-field v-model="pass" label="密码" center clearable placeholder="请设置密码" />
    </van-form>
    <div style="margin: 16px">
      <van-button
        round
        block
        color="linear-gradient(to right, #ff944b, #fc5500)"
        native-type="submit"
        @click="add"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import { Field, Button, Form } from "vant";
import { SmsVerification,secondPassword } from "../request/http";
export default {
  data() {
    return {
      tel: "",
      sms: "",
      pass: "",
    };
  },
  methods: {
    onSubmit() {
      console.log(this.tel);
      SmsVerification({ mobile: this.tel, sms_type: "login" }).then((res) => {
        console.log(res);
      });
    },
    add() {
      secondPassword({ mobile: this.tel, password: this.pass, sms_code: this.sms }).then(res => {
          console.log(res);
        this.$router.push('/login')
      })
    },
  },
  created() {},
  mounted() {},
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Form.name]: Form,
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.register {
  background-color: #fff;
  height: 100vh;
}
header {
  width: 100%;
  text-align: center;
}
.van-form {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
}
</style>

